<template>
  <div>
    <div>
      <h3>认证流程</h3>
    <div>
      <el-steps
        :space="200"
        :active="active"
        simple
        style="margin-top: 20px"
        finish-status="success"
      >
        <el-step title="认证申请"></el-step>
        <el-step title="专业自评"></el-step>
        <el-step title="进校考察"></el-step>
        <el-step title="结论认定"></el-step>
        <el-step title="整改提高"></el-step>
      </el-steps>
    </div>
    <!-- 第一步：认证申请 -->
    <div v-if="active === 0">
      <firstStep :certStatus="certStatus" @getCertStatus="getCertStatus" :certStage="certStage"></firstStep>
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-button @click="next" type="primary" v-if="certStatus === 2 && certStage === 1 ">继续认证</el-button>
      </el-row>
    </div>
    <!-- 第二步：专业自评 -->
    <div v-if="active === 1" class="two">
      <secondStep :certStatus="certStatus" :active="active" :certStage="certStage" @getCertStatus="getCertStatus"></secondStep>
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-button @click="next" type="primary" v-if="certStatus !== 1 && certStage === 2">{{certStatus === 2 ? "继续认证" : "重新认证"}}</el-button>
      </el-row>
    </div>
    <!-- 第三步进校考查 -->
    <div v-if="active === 2 " class="two">
      <thirdStep :certStatus="certStatus" :active="active" :certStage="certStage" @getCertStatus="getCertStatus"></thirdStep>
      <el-row type="flex" justify="center" style="margin-top:20px">
        <el-col :span="4">
          <el-button @click="next" type="primary" v-if="certStatus !== 1 && certStage === 3">查看结论</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 第四步进结论认定 -->
    <div v-if="active === 3" class="two">
      <fourthStep :certStatus="certStatus" :active="active"></fourthStep>
      <el-row type="flex" justify="center" style="margin-top:20px">
        <el-col :span="4">
          <el-button @click="active=0" type="primary" v-if="certStatus === 3 && certStage === 3">重新认证</el-button>
          <el-button @click="next" type="primary" v-else>继续认证</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 第五步整改提高 -->
    <div v-if="active === 4" class="two">
      <fifthStep :certStatus="certStatus" :active="active"></fifthStep>
        <div class="certBtn" v-if="certStatus === 3 && certStage === 5">
          <el-button @click="active = 0" type="primary">重新认证</el-button>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
import firstStep from "./firstStep.vue";
import secondStep from "./secondStep.vue";
import thirdStep from "./thirdStep.vue";
import fourthStep from "./fourthStep.vue";
import fifthStep from "./fifthStep.vue";
import cert from "./cert.vue";
export default {
  components: {
    firstStep,
    secondStep,
    thirdStep,
    fourthStep,
    fifthStep,
    cert
  },
  data() {
    var myDate = new Date();
    return {
      active: 0,
      certStatus: "", // 1是认证中，2是认证成功，3驳回
      certStage: 1,
      improveRemark:'', // 整改提高通过结论认定
      certId: this.$store.state.user.certId,
      rejectMessage: "", // 驳回理由
      proRemark: ''
    };
  },
   activated() {
    this.getCertStatus();
  },
  methods: {
    next() {
      if (this.certStatus === 2 || this.certStage === 3) {
        this.active += 1
      }else {
        this.active = 0
      }

    },
    add() {
      this.majorDialogVisible = true;
    },
    getCertStatus() {
        this.$http({
        url: this.$http.cert("/getCertById"),
        method: "get"
      }).then(res => {
        this.certId = res.data.data;
        this.getMessage(this.openReject)
      })
    },
    // 查看驳回理由
    openReject(){
      if(this.certStage !== 3 && this.certStatus === 3) {
        this.$http({
        url: this.$http.cert("/lastReject"),
        method: "get"
      }).then(res => {
        this.rejectMessage = res.data.data
        this.open()
      });
      }

    },
    getMessage(fun) {
      this.$http({
        url: this.$http.cert(`/getCertById/${this.certId}`),
        method: "get"
      }).then(res => {
        let result = res.data.data
        this.active = result.certStage - 1
        this.certStatus = result.certStatus
        this.certStage = result.certStage
        fun()
        this.improveRemark = result.improveRemark
        if(this.improveRemark) this.improveReason()
      });
    },
    open() {
        this.$alert(`${this.rejectMessage}`, '驳回理由：', {
          confirmButtonText: '确定',
          callback: () => {

          }
        });
      },
    improveReason() {
        this.$alert(`${this.improveRemark}`, '整改结论：', {
          confirmButtonText: '确定',
          callback: () => {
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.two {
  margin-top: 20px;
}
.text{
  text-align: center;
}
.certBtn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
